/*
 * @Description: 开关组件(今天/历史)
 * @Author: kanglin
 * @Date: 2018-09-04 15:15:56
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    @import '~src/assets/css/common.less';
    .v-com-panel.data-panel{
        .panel__header{
            &:before {
              content: '';
              display: block;
              height: 24 * @rem-per-px;
              background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/2.3.9/baogao_bgshang_img@2x.png ');
              background-size: 100%;
              background-repeat: no-repeat;
              margin-bottom: -1px;
          }
        }
        .panel__header__tile{
            position: relative;
            padding: 0 30* @rem-per-px;
            height: 65 * @rem-per-px;
            background: #ffffff;
            color: #414853;
            // font-weight: bold;
            line-height: 48* @rem-per-px;
            font-size: 36* @rem-per-px;
            vertical-align: top;

            &:before {
                content: '';
                position: absolute;
                display: block;
                left: 30* @rem-per-px;
                right: 30* @rem-per-px;
                border-bottom: 2px #414853 solid;
                bottom: 4 * @rem-per-px;
            }
            &::after {
                content: '';
                position: absolute;
                display: block;
                left: 30* @rem-per-px;
                right: 30* @rem-per-px;
                border-bottom: 1px #414853 solid;
                bottom: 0
            }
        }

        .panel__body{
            background: #ffffff;
            padding: 0 30* @rem-per-px;
        }
        .panel__footer{
            background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/2.3.9/baogao_bgxia_img@2x.png ');
            background-size: 100%;
            background-repeat: no-repeat;
            height: 40* @rem-per-px;
            width: 100%;
        }
        .panel__header__tile__switch{
            line-height: 48* @rem-per-px;
            margin-left: 30 * @rem-per-px;
        }

        .fade-enter-active, .fade-leave-active {
            transition: opacity .5s;
            }
        .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
            opacity: 0;
        }
    }
</style>

<template>
	<div class="v-com-panel data-panel">
		<div class="panel__header">
			<div class="panel__header__tile">
				<span v-if="is_today">{{ $t('report.today') }}</span>
				<span v-else>{{ $t('report.history') }}</span>
				<span class="panel__header__tile__switch">
					<m-switch
						:value.sync="is_today"
						@on-change="handleChange"/>
				</span>
			</div>
		</div>
		<div class="panel__body">
			<!-- <transition
				name="fade"
				mode="out-in"> -->
			<div v-if="is_today">
				<slot name="today"/>
			</div>
			<div v-else>
				<slot name="history"/>
			</div>
			<!-- </transition> -->
		</div>
	<!-- <div class="panel__footer"/> -->
	</div>
</template>

<script>
import mSwitch from 'src/views/component/m-switch';

export default {
	name: 'DataPanel',
	components: {
		'm-switch': mSwitch,
	},
	props: {
		defaultMode: {
			type: String,
			default() {
				return 'today';
			},
		},
	},
	data() {
		return {
			is_today: this.defaultMode === 'today',
		};
	},
	methods: {
		/**
         * 监控开关
         * @param  {Boolean} event
         * @return {undefined} {description}
         */
		handleChange(event) {
			this.$emit('change', event);
		},
	},
};
</script>
